/* *
   放大镜效果
 * */
$(".bigBox-img").mouseenter(function(){
	$(".tool").css("display","block");
	$(".small-box").css("display","block");
})
$(".bigBox-img").mouseleave(function(){
	$(".tool").css("display","none");
	$(".small-box").css("display","none");
})
$(".bigBox-img").mousemove(function(e){
	var x = e.clientX - $(".bigBox-img").offset().left-$(".tool").width()/2+$(document.body).scrollLeft();
	var y = e.clientY - $(".bigBox-img").offset().top-$(".tool").height()/2+$(document.body).scrollTop();
//	console.log(e.offsetX +"  "+e.clientX);
	//console.log(e.offset().left);
	if(x<0){
		x = 0;
	}
	if(x>$(".bigBox-img").width()-$(".tool").width()){
		x = $(".bigBox-img").width()-$(".tool").width()
	}
	if(y<0){
		y = 0;
	}
	if(y>$(".bigBox-img").height()-$(".tool").height()){
		y = $(".bigBox-img").height()-$(".tool").height()
	}
	$(".tool").css({"left":x,"top":y});
	$(".small-box img").css({"left":-2*x,"top":-2*y})
})
//点击之后下面得小图会自动更换样式   
var bigImgSrc = ["../images/details/873c8bfd-bbe5-43e7-b9f7-c6ec3fb7ec12-medium.jpg","../images/details/88f907e4-9a2f-4fe8-a2a6-b74587cc6845-medium.jpg",
"../images/details/78d34bc7-507e-4ff3-834b-b7e5056a77ac-medium.jpg","../images/details/d5ec97eb-959d-4be2-ab37-97e928990801-medium.jpg",
"../images/details/562ff110-b446-4133-86ed-597789541e1b-medium.jpg"
];

//并且更换放大镜的大图片
$("#thumblist").on("click","li",function(){
	$("#thumblist li a").removeClass("active");
	$(this).children().eq(0).addClass("active");
//	alert($(this).index())
	$(".bigBox-img").children().eq(0).attr("src",bigImgSrc[$(this).index()]);
	$(".small-box").children().eq(0).attr("src",bigImgSrc[$(this).index()]);
	
})
//动态添加json 创建tab 里面的详情页面
//$.get("../json/details-tab.json",function(data){
//	createNode(data);
//})
var path = "../images/details/";
$.get("../json/details-tab.json",function(data){
	tab_imgSrc = data[0].tab1;
	for(var i in tab_imgSrc){
		$('<img src=" '+path+tab_imgSrc[i]+' "/>').appendTo($(".tab-a-contain"));
	}
})
//var tab_imgSrc;
//function createNode(data){
//	tab_imgSrc = data[0].tab1;
//	for(var i in tab_imgSrc){
//		$('<img src=" '+path+tab_imgSrc[i]+' "/>').appendTo($(".tab-a-contain"));
//	}
//	console.log(tab_imgSrc)
//}


$(".detail-tab-a").on("click","li",function(){
	
	$(this).addClass("active").siblings().removeClass("active");
	switch($(this).index()){
		case 0 :
			$(".tab-a-contain").html("");
			$.get("../json/details-tab.json",function(data){
				tab_imgSrc = data[0].tab1;
				for(var i in tab_imgSrc){
					$('<img src=" '+path+tab_imgSrc[i]+' "/>').appendTo($(".tab-a-contain"));
				}
			})
		break;
		case 1 : 
			$(".tab-a-contain").html("");
			$.get("../json/details-tab.json",function(data){
				$('<table border="0" cellspacing="0" cellpadding="0"><tbody></tbody></table>').appendTo($(".tab-a-contain"));
				//首先创建一个table 和 tbody
				var thname = data[0].tab2.thName;//获得thName里面的数组对象
				var tdname = data[0].tab2.tdName;//获得tdName里面的数组对象
				
				var thnameOnea = tdname[0].one.ddone;//获得tdName里面的第一组ddone数组对象
				var thnameOneb = tdname[0].one.ddtwo;//获得tdName里面的第一组ddtwo数组对象
				
				var thnametwoa = tdname[0].two.ddone;
				var thnametwob = tdname[0].two.ddtwo;
				
				var thnametreena = tdname[0].treen.ddone;
				var thnametreenb = tdname[0].treen.ddtwo;
				
				var thnamefoura = tdname[0].four.ddone;
				var thnamefourb = tdname[0].four.ddtwo;
				//创建四个tr 给每个tr添加class 方便追加
				for(var j in thname){
					$('<tr class="t'+j+'"><th class="group" colspan="2">'+thname[j]+'</th></tr>').appendTo("tbody");
				}
				//在第一个tr.t0  后面插入thnameOnea和thnameOneb
				for(var k=0;k<thnameOnea.length;k++){
					$(".t0").after($('<tr><td class="ptd">'+thnameOnea[k]+'</td><td class="pdetails">'+thnameOneb[k]+'</td></tr>'));
				}
				//在第二个tr.t1  后面插入thnametwoa和thnametwob
				for(var k=0;k<thnametwoa.length;k++){
					$(".t1").after($('<tr><td class="ptd">'+thnametwoa[k]+'</td><td class="pdetails">'+thnametwob[k]+'</td></tr>'));
				}
				//在第三个tr.t2  后面插入thnametreena和thnametreenb
				for(var k=0;k<thnametreena.length;k++){
					$(".t2").after($('<tr><td class="ptd">'+thnametreena[k]+'</td><td class="pdetails">'+thnametreenb[k]+'</td></tr>'));
				}
				//在第四个tr.t3  后面插入thnamefoura和thnamefourb
				for(var k=0;k<thnamefoura.length;k++){
					$(".t3").after($('<tr><td class="ptd">'+thnamefoura[k]+'</td><td class="pdetails">'+thnamefourb[k]+'</td></tr>'));
				}
		})

			break;
		case 2 : 
			$(".tab-a-contain").html("");
			$('<div class="pinglun" style="position: relative;"><p>暂无评论，请添加</p><input type="button"  onclick="add()" id="addping" class="addping" value="添加评论" style="position:absolute"/></div>').appendTo($(".tab-a-contain"));
			break;
		case 3 :
			$(".tab-a-contain").html("");
			$('<div class="pinglun" style="position: relative;"><p>暂无咨询，请添加</p><input type="button"  onclick="add()" id="addping" class="addping" value="添加咨询" style="position:absolute"/></div>').appendTo($(".tab-a-contain"));
			break;
	}
})













































